<template>
    <div>
        <homeHeader  :submenu="submenu" :active="active"/>
        <div class="bodyer">
            <div class="lottery-list">
                <!--左侧下拉表-->
                <div class="left-list">
                    <Collapse accordion>
                        <Panel name="1">
                            <div class="counst">
                                <i>
                                <img src="https://066981.com/themes/simpleboot3/public/assets/game/images/34913a62-339f-4727-be7d-bd136c40bbb5.png">
                                </i>
                                <span>全部彩种</span>
                            </div>
                            <div slot="content">
                                <div class="child">
                                    <p>
                                        <i><img src="https://066981.com/upload/default/20180714/4ed4d582843e62f8ff3038b2c1c6c9b5.png" style="width: 28px;height: 28px;" alt="bj28"></i>
                                        <a target="_blank" href="/login">北京28</a>
                                    </p>
                                    <p>
                                        <i><img src="https://066981.com/upload/default/20180714/4ed4d582843e62f8ff3038b2c1c6c9b5.png" style="width: 28px;height: 28px;" alt="bj28"></i>
                                        <a target="_blank" href="/login">北京28</a>
                                    </p> 
                                    <p>
                                        <i><img src="https://066981.com/upload/default/20180714/4ed4d582843e62f8ff3038b2c1c6c9b5.png" style="width: 28px;height: 28px;" alt="bj28"></i>
                                        <a target="_blank" href="/login">北京28</a>
                                    </p>                  
                                </div>
                            </div>
                        </Panel>
                        <Panel name="2">
                            <div class="counst">
                                <i><img src="https://066981.com/upload/admin/20180417/674b4c13141f5a1713aadb8bf98f7501.png" style="width: 22px;height: 22px;" alt="PC蛋蛋"></i>
                                <span>PC蛋蛋</span> 
                            </div>
                            <div slot="content">
                                <div class="child">
                                    <p>
                                        <i><img src="https://066981.com/upload/default/20180714/4ed4d582843e62f8ff3038b2c1c6c9b5.png" style="width: 28px;height: 28px;" alt="bj28"></i>
                                        <a target="_blank" href="/login">北京28</a>
                                    </p>
                                    <p>
                                        <i><img src="https://066981.com/upload/default/20180714/4ed4d582843e62f8ff3038b2c1c6c9b5.png" style="width: 28px;height: 28px;" alt="bj28"></i>
                                        <a target="_blank" href="/login">北京28</a>
                                    </p> 
                                    <p>
                                        <i><img src="https://066981.com/upload/default/20180714/4ed4d582843e62f8ff3038b2c1c6c9b5.png" style="width: 28px;height: 28px;" alt="bj28"></i>
                                        <a target="_blank" href="/login">北京28</a>
                                    </p>                  
                                </div>
                            </div>
                        </Panel>
                    </Collapse>
                </div>
                <!--右侧彩票列表-->
                <div class="right-content">
                    <div class="streamer">
                        <Icon type="md-volume-up" style="font-size: 20px; color: rgb(201, 57, 46);" />
                        <span>hi,欢迎来到彩票大厅</span>
                    </div>
                    <div class="child-content clear">
                        <ul class="lottery-lobby ">
                            <li v-for="(item,index) in lotteryList" :key="index" class="countdown" data-id="79" data-close="524" id="WMFFC:1">
                                <div class="lobby-item">
                                    <div class="detal">
                                        <div class="info"><img class="left" src="https://066981.com/upload/default/20180714/4505e9b3ac295648b842e9693621d84e.png" style="width: 57px;height: 57px;" alt="jsk3">
                                            <div class="ct">
                                                <div class="lottery-name">{{item.actionName}}</div>
                                                <div class="issue-cd">
                                                    <div>第{{item.thisNo}}期</div>
                                                    <div class="count-time">
                                                        <span class="hours">00</span>:<span class="minutes">03</span>:<span class="seconds">40</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="results">
                                            <span>上期开奖</span>
                                            <div class="sBall">{{item.data[0]}}</div>
                                            <div class="sBall">{{item.data[1]}}</div>
                                            <div class="sBall">{{item.data[2]}}</div>
                                        </div>
                                    </div>
                                    <div class="bottom">
                                        <a href="/zst/79" target="_blank" class="fun">
                                            <Icon type="md-trending-up" style="font-size: 18px; color: rgb(247, 77, 77);"/>EE                          &nbsp;&nbsp;
                                            <span>号码走势</span>
                                        </a> 
                                        <a href="/introduce/79" target="_blank" class="fun">
                                            <Icon type="ios-paper-outline"  style="font-size: 18px; color: rgb(119, 199, 140);"/>                          &nbsp;&nbsp;
                                            <span>玩法规则</span>
                                        </a>                     
                                        <a href="/login" class="bet-btn">立即投注</a>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import {Collapse,Panel} from 'iView'
import homeHeader from "@/components/home/header";
//大厅模拟数据
let dateList = [
                {
                    actionName:"江苏快三",
                    actionNo:"201809280823",
                    actionTime:"2018-09-28 13:42:05",
                    data:["3", "3", "6"],
                    diffTime:59,
                    kjdTime:5,
                    thisNo:"201809280824"
                },
                {
                    actionName:"湖北快三",
                    actionNo:"201809280823",
                    actionTime:"2018-09-28 13:42:05",
                    data:["3", "3", "6"],
                    diffTime:59,
                    kjdTime:5,
                    thisNo:"201809280824"
                }
            ];
export default {
    name:"hall",
    data(){
        return{
            submenu:true,
            active:"2",
            lotteryList:[]
        }
    },
    components:{
        homeHeader,
        Collapse,
        Panel
    },
    methods:{
        init:function(){
            this.lotteryList = dateList;
            //console.log(dateList);
            
        },
    },
    created(){
        this.init();
    }
}
</script>
<style scoped>
.lottery-list{
    position: relative;
}
.left-list{
    width: 210px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
}
.lottery-list .lottery-lobby {
    height: 100%;
    padding-bottom: 30px;
    padding-left: 10px;
}
.lottery-list .lottery-lobby li {
    float: left;
    margin: 0 1px;
}
.lottery-list .left-list  .counst{
    position: relative;
    padding-left: 35px;
}
.lottery-list .left-list .counst i {
    width: 36px;
    height: 22px;
    display: block;
    position: absolute;
    top: 7px;
    left: 0px;
}
.lottery-list .left-list .child {
    line-height: 40px;
    font-size: 14px;
    background: #fff;
}
.lottery-list .left-list .child p{
    position: relative;
    height: 38px;
    line-height: 38px;
}
.lottery-list .left-list .child p i {
    width: 28px;
    height: 28px;
    position: absolute;
    top: 5px;
    left: 15px;
}
.lottery-list .left-list .child a {
    color: #333;
    display: block;
    height: 100%;
    width: 100%;
    padding-right: 10px;
    border: 1px solid #fff;
    padding-left: 56px;
}
/*福彩大厅*/
.right-content{
    padding-left: 210px;
}
.lottery-list .streamer {
    line-height: 49px;
    font-size: 16px;
    padding-left: 20px;
    background-color: #FFF5F5;
    border-top: 1px solid #FFD8D7;
    border-bottom: 1px solid #FFD8D7;
}
.lottery-list .child-content {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
    -webkit-box-flex: 1;
    -ms-flex: 1 1 0%;
    flex: 1 1 0%;
    padding-bottom: 30px;
}
.lottery-list .lottery-lobby[data-v-bd8919b6] {
    height: 100%;
    padding-bottom: 30px;
    padding-left: 220px;
}
.lottery-list .lottery-lobby[data-v-bd8919b6] li {
    float: left;
    margin: 0 1px;
}
.lobby-item {
    background-color: #FFFFFF;
    width: 360px;
    border: 4px solid #E7E7E7;
    margin: 15px 5px 0px 5px;
    -webkit-transition: all .2s linear;
    transition: all .2s linear;
}
.lobby-item:hover {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
    -webkit-box-shadow: 3px 4px 6px #c1c1c1;
    box-shadow: 3px 4px 6px #c1c1c1;
}
.lobby-item .detal {
    min-height: 105px;
    padding: 10px 10px 0px 10px;
}

.lobby-item .detal .info {
    overflow: hidden;
}
.lobby-item .detal .info > img {
    width: 57px;
    height: 57px;
}
.lobby-item .detal .info .ct {
    display: block;
    margin-left: 70px;
}
.lobby-item .detal .info .ct .lottery-name {
    font-size: 18px;
    color: #333;
    font-weight: bold;
}
.lobby-item .detal .info .ct .issue-cd {
    padding-right: 10px;
    overflow: hidden;
    margin-top: 10px;
}
.lobby-item .detal .info .ct .issue-cd div {
    font-size: 14px;
    color: #666666;
    float: left;
}
.lobby-item .detal .info .ct .issue-cd div.count-time {
    float: right;
}
.lobby-item .detal .results {
    position: relative;
    height: 30px;
    margin: 10px 0;
    padding-left: 65px;
}
.lobby-item .detal .results span {
    font-size: 12px;
    color: #000000;
    padding-right: 7px;
    position: absolute;
    left: 0;
    top: 0;
    line-height: 18px;
}
.lobby-item .detal .results .sBall {
    width: 18px;
    height: 18px;
    background-color: #E94335;
    border-radius: 50%;
    font-size: 12px;
    color: #fff;
    text-align: center;
    display: inline-block;
    margin-left: 4px;
    margin-bottom: 1px;
}

.lobby-item .bottom {
    height: 40px;
}
.lobby-item .bottom .fun {
    background-color: #F7F7F7;
    border-top: 1px solid #E7E7E7;
    font-size: 12px;
    color: #666;
    width: 100px;
    height: 100%;
    float: left;
    line-height: 40px;
    text-align: center;
}
.lobby-item .bottom .bet-btn {
    display: block;
    line-height: 40px;
    text-align: center;
    background-color: #be1204;
    color: #fff;
    font-size: 18px;
}

</style>

<style>
.left-list .ivu-collapse{
    width: 210px;
}
.left-list .ivu-collapse-content>.ivu-collapse-content-box {
    padding:0;
}
.left-list .ivu-collapse>.ivu-collapse-item>.ivu-collapse-header>.ivu-icon  {
    position:absolute;
    right:0px;
    top:13px;
}

</style>
